<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>贴吧管理</title>
		<link rel="stylesheet" type="text/css" href="../css/iview.css">
		<script src="../js/vue.min.js"></script>
		<script src="../js/iview.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<script src="../js/index.js"></script>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<div id="app" align="center">
			<el-row>
				<el-col :span="24">
					<div>
						<!--条件查询的条件输入框-->
						<font size="4">关键字搜索:</font>
						<el-input v-model="postTitle" placeholder="请输入内容" style="width: 150px; line-height: 50px;"></el-input>
						<font size="4">贴子类型:</font>
						<el-select v-model="typeName" style="width: 150px;line-height: 50px;" placeholder="请选择">
							<el-option v-for="type in typeList" :key="type.typeId" :label="type.typeName" :value="type.typeName"></el-option>
						</el-select>
						<font size="4">排序:</font>
						<el-select v-model="orderBy" style="width: 150px;line-height: 50px;" placeholder="请选择">
							<el-option v-for="s in options3" :key="s.value" :label="s.label" :value="s.value" :disabled="s.disabled"></el-option>
						</el-select>
						<el-button type="primary" icon="el-icon-search" @click="query()" round>搜索</el-button>
					</div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<div style="width: 100%;"><template>
							<!--element表格-->
							<el-table v-loading="loading" :data="postList.slice((currentPage-1)*pagesize,currentPage*pagesize)" style=" width: auto">
								<el-table-column type="index" label="序号" :show-overflow-tooltip="true"></el-table-column>
								<el-table-column prop="postTitle" label="帖子标题" :show-overflow-tooltip="true"></el-table-column>
								<el-table-column prop="userName" label="发帖人" :show-overflow-tooltip="true"></el-table-column>
								<el-table-column prop="replyTime" label="发帖时间" :show-overflow-tooltip="true"></el-table-column>
								<el-table-column prop="replyLikenum" label="点赞数" :show-overflow-tooltip="true"></el-table-column>
								<el-table-column prop="replyReportnum" label="举报数" :show-overflow-tooltip="true"></el-table-column>
								<el-table-column prop="replyReportnum" label="是否删除" :show-overflow-tooltip="true">
									<template slot-scope="scope">
										<span v-if="scope.row.isDelete">是</span>
										<span v-else>否</span>
									</template>
								</el-table-column>
								<el-table-column prop="operation" label="操作" align="center" min-width="80">
									<template slot-scope="scope">
										<!-- <el-button type="danger" icon="el-icon-delete" circle @click="delete(scope.row)" size="mini"></el-button> -->
										<el-button type="danger" icon="el-icon-tickets" circle @click="dialog(scope.row)" size="mini"></el-button>
										<el-button type="danger" icon="el-icon-setting" circle @click="setTYPE(scope.row)" size="mini"></el-button>
									</template>
								</el-table-column>
								<el-table-column prop="operation" label="操作" align="center" min-width="80">
									<template slot-scope="scope">
										<el-button type="primary" v-if="scope.row.postIsstick" round @click="cancelStick(scope.row)" size="mini">取消置顶</el-button>
										<el-button type="primary" v-else round @click="stickPost(scope.row)" size="mini">置 顶</el-button>
										<br />
										<br />
										<el-button type="success" round v-if="scope.row.isDelete" @click="restore(scope.row)" size="mini">还 原</el-button>
										<el-button type="danger" round v-else @click="deleteReply(scope.row)" size="mini">删 除</el-button>
									</template>
								</el-table-column>
								<el-table-column prop="operation" label="操作" align="center" min-width="80">
									<template slot-scope="scope">
										<el-button type="primary" round @click="replys(scope.row)" size="mini">查看回复</el-button>
										<br />
										<br />
										<el-button type="primary" round @click="hahah(scope.row)" size="mini">举报详情</el-button>
									</template>
								</el-table-column>
							</el-table>
						</template></div>
					<el-dialog title="设置类型" :visible.sync="dialogVisible3">
						<!-- <el-input v-model="postId" placeholder="Id" style="width: 50px; line-height: 10px;"></el-input> -->
						<el-container>
							<el-aside>
								<span>已拥有类型</span>
								<el-table :data="typelistyes">
									<el-table-column property="typeId" label="编号" width="80"></el-table-column>
									<el-table-column property="typeName" label="类型名称" width="150"></el-table-column>
									<el-table-column prop="operation" label="操作" align="center" min-width="50"><template slot-scope="scope">
											<el-button type="info" icon="el-icon-d-arrow-right" circle @click="deleteTYPE(scope.row)" size="mini"></el-button>
											</el-button>
										</template></el-table-column>
								</el-table>
							</el-aside>
							<el-main>
								<span>未拥有类型</span>
								<el-table :data="typelistno">
									<el-table-column property="typeId" label="编号" width="80"></el-table-column>
									<el-table-column property="typeName" label="类型名称" width="150"></el-table-column>
									<el-table-column prop="operation" label="操作" align="center" min-width="50"><template slot-scope="scope">
											<el-button type="info" icon="el-icon-d-arrow-left" circle @click="insertTYPE(scope.row)" size="mini"></el-button>
											</el-button>
										</template></el-table-column>
								</el-table>
							</el-main>
						</el-container>
					</el-dialog>
					<el-dialog :visible.sync="dialogVisible2" width="30%" :before-close="handleClose">
						<el-input v-model="reportId" placeholder="Id" style="width: 50px; line-height: 10px;"></el-input><span>确定删除吗？</span><span
						 slot="footer" class="dialog-footer">
							<el-button @click="dialogVisible2 = false">取 消</el-button>
							<el-button type="primary" @click="deleteport()">确 定</el-button>
						</span>
					</el-dialog>
					<el-dialog title="帖子内容详情" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
						<el-input type="textarea" :rows="10" placeholder="请输入内容" v-model="textarea"></el-input><span slot="footer" class="dialog-footer">
							<el-button @click="dialogVisible = false">取 消</el-button>
						</span>
					</el-dialog>
					<el-dialog title="举报详情" :visible.sync="dialogTableVisible">
						<!-- <el-input v-model="replyId" placeholder="Id" style="width: 50px; line-height: 10px;"></el-input>-->
						<el-table :data="reportlist">
							<el-table-column property="userId" label="举报人ID" width="100"></el-table-column>
							<el-table-column property="reportReason" label="举报内容" width="250"></el-table-column>
							<el-table-column prop="operation" label="举报操作" align="center" min-width="80"><template slot-scope="scope">
									<el-button type="danger" icon="el-icon-delete" circle @click="deleteReport(scope.row)" size="mini"></el-button>
									</el-button>
								</template></el-table-column>
						</el-table>
					</el-dialog>
					<el-dialog title="帖子ID回复列" :visible.sync="dialogTableVisible2">
						<!-- <el-input v-model="replyId" placeholder="Id" style="width: 50px; line-height: 10px;"></el-input>-->
						<el-table :data="replyList">
							<el-table-column type="index" label="序号" :show-overflow-tooltip="true"></el-table-column>
							<el-table-column property="replyContent" label="回复内容" width="250"></el-table-column>
							<el-table-column property="replyTime" label="回复时间" width="100"></el-table-column>
							<el-table-column prop="operation" label="回复操作" align="center" min-width="80"><template slot-scope="scope">
									<el-button type="danger" icon="el-icon-delete" circle @click="deletereply(scope.row)" size="mini"></el-button>
									</el-button>
									<el-button type="danger" round @click="hahahss(scope.row)" size="mini">回复举报</el-button>
								</template></el-table-column>
						</el-table>
					</el-dialog>
					<el-dialog :visible.sync="dialogVisible2" width="30%" :before-close="handleClose">
						<!-- 	<el-input v-model="reportId" placeholder="Id" style="width: 50px; line-height: 10px;"></el-input> --><span>确定删除吗？</span><span
						 slot="footer" class="dialog-footer">
							<el-button @click="dialogVisible2 = false">取 消</el-button>
							<el-button type="primary" @click="deleteport()">确 定</el-button>
						</span></el-dialog>
					<el-dialog :visible.sync="dialogVisible4" width="30%" :before-close="handleClose">
						<!-- 	<el-input v-model="reportId" placeholder="Id" style="width: 50px; line-height: 10px;"></el-input> --><span>确定删除吗？</span><span
						 slot="footer" class="dialog-footer">
							<el-button @click="dialogVisible4 = false">取 消</el-button>
							<el-button type="primary" @click="deletepost()">确 定</el-button>
						</span></el-dialog>
					<el-pagination class="fy" layout="prev, pager, next" @current-change="current_change" :total="total" :page-size="pagesize"
					 background></el-pagination>
				</el-col>
			</el-row>
		</div>
	</body>
	<script>
		if(sessionStorage.getItem("access_token")!=null){
			axios.defaults.headers.common['Authorization'] = "bearer " + sessionStorage.getItem("access_token");
		}
		
		var Main = new Vue({
			el: '#app',
			mounted: function () {
				this.query();
				this.queryType();
			},
			data() {
				return {
					options3: [{
						value: 'replyTime',
						label: '回复时间',
					}, {
						value: 'replyLikenum',
						label: '点赞数',
					}, {
						value: 'replyReportnum',
						label: '举报数',
					}],
					loading: true,
					dialogVisible1: false,
					postIsstick: '',
					textarea: '',
					replyId: "",
					postId:"",
					postTitle: "",
					userName: "",
					isStick: "",
					isSelect: "",
					typeName:"",
					typeId: "",
					replyTime: "",
					replyContent: "",
					replyLikenum: "",
					replyReportnum: "",
					orderBy:"",
					reportId:"",
					reportReason: "",
					dialogVisible: false,
					dialogVisible2: false,
					dialogVisible3: false,
					dialogVisible4: false,
					dialogTableVisible:false,
					dialogTableVisible2:false,
					total: 50,
					pagesize: 10,
					currentPage: 1,
					typeList:[],
					postList:[],
					replyList: [],
					reportlist: [],
					typelistyes:[],
					typelistno: [],
				};
			},
			methods: {
				dialog(val){
					this.dialogVisible=true;
					this.textarea=val.replyContent;
				},
				query() {
					let params = new URLSearchParams();
					params.append("postTitle", this.postTitle);
					params.append("typeName", this.typeName);
					params.append("orderBy", this.orderBy);
					params.append("page",this.currentPage);
					params.append("rows",this.pagesize);
					console.log("typeName==>"+this.typeName);
					axios({
						method: 'post',
						url: '/api/bbs/post/getAllPost',
						data: params,
						headers: {},
					}).then(res => {
						res = res.data;
						this.postList = res.rows;
						this.total = res.total;
						console.log('postList==>'+this.postList);
						console.log('postIsstick==>'+this.postIsstick);
						this.loading=false;
					})
				},
				queryType() {
					axios({
						method: 'post',
						url: '/api/bbs/type/getAllType',
						headers: {},
					}).then(res => {
						res = res.data;
						this.typeList = res;
						console.log('typeList==>' + this.typeList);
					})
				},
				hahah(row){
					this.dialogTableVisible=true;
					this.replyId=row.replyId;
					let params = new URLSearchParams();
					params.append("replyId",this.replyId);
					axios({
						method: 'post',
						url: '/api/bbs/report/getreport',
						data: params,
						headers: {},
					}).then(res => {
						res = res.data;
						this.reportlist = res.rows;
						console.log('reportlist==>'+this.reportlist);
					})
				},
				hahahss(row){
					this.dialogTableVisible=true;
					this.replyId=row.replyId;
					let params = new URLSearchParams();
					params.append("replyId",this.replyId);
					axios({
						method: 'post',
						url: '/api/bbs/report/getreport',
						data: params,
						headers: {},
					}).then(res => {
						res = res.data;
						this.reportlist = res.rows;
						console.log('reportlist==>'+this.reportlist);
					})
				},
				replys(row){
					this.dialogTableVisible2=true;
					this.postId=row.postId;
					let params = new URLSearchParams();
					params.append("postId",this.postId);
					axios({
						method: 'post',
						url: '/api/bbs/reply/getReplyList',
						data: params,
						headers: {},
					}).then(res => {
						res = res.data;
						this.replyList = res.rows;
						console.log('replyList==>'+this.replyList);
					})
				},
				setTYPE(row){
					this.dialogVisible3=true;
					this.postId=row.postId;
					this.typeId=row.typeId;
					this.typeno();
					this.typeyes();
				},
				deleteTYPE(row){
					let params = new URLSearchParams();
					params.append("postId",this.postId);
					params.append("typeId",row.typeId);
					axios({
						method: 'post',
						url: '/api/bbs/type/rePostType',
						data: params,headers: {},
					}).then(res => {
						res=res.data;
						if (res.success) {
							this.typeyes();
							this.typeno();
						} else {
							alert(res.message)
						}
					})
				},
				insertTYPE(row){
					let params = new URLSearchParams();
					params.append("postId",this.postId);
					params.append("typeId",row.typeId);
					axios({
						method: 'post',
						url: '/api/bbs/type/addPostType',
						data: params,
						headers: {},
					}).then(res => {
						res=res.data;
						if (res.success) {
							alert(res.message)
							this.typeyes();
							this.typeno();
						} else {
							alert(res.message)
						}
					})
				},
				typeno(){
					let params = new URLSearchParams();
					params.append("postId",this.postId);
					axios({
						method: 'post',
						url: '/api/bbs/type/queryNoType',
						data: params,
						headers: {},
					}).then(res => {
						res = res.data;
						this.typelistno = res;
						console.log('typelistno==>'+this.typelistno);
					})
				},
				typeyes(){
					let params = new URLSearchParams();
					params.append("postId",this.postId);
					axios({
						method: 'post',
						url: '/api/bbs/type/queryType',
						data: params,
						headers: {},
					}).then(res => {
						res = res.data;
						this.typelistyes = res;
						console.log('typelistyes==>'+this.typelistyes);
					})
				},
				WdeleteReport(row){
					this.dialogVisible2=true;
					this.reportId=row.reportId;
				},
				deleteport(){
					let params = new URLSearchParams();
					params.append("reportId",this.reportId);
					axios({
						method: 'post',
						url: '/api/bbs/report/deleteport',
						data: params,
						headers: {},
					}).then(res => {
						res=res.data;
						if (res.success) {
							alert(res.message)
							this.dialogVisible2=false;
						} else {
							alert(res.message)
						}
					})
				},
				reports(){
					let params = new URLSearchParams();
					params.append("replyId",this.replyId);
					axios({
						method: 'post',
						url: '/api/bbs/report/getreport',
						data: 'params',
						headers: {},
					}).then(res => {
						res = res.data;
						this.reportlist = res.rows;
						console.log('reportlist==>'+this.reportlist);
					})
				},
				deleteReply(row){
					let params = new URLSearchParams();
					params.append("replyId", row.replyId);
					axios({
						method: 'post',
						url: '/api/bbs/reply/upReplyIsDel',
						data:params,
						headers: {},
					}).then(res => {
						res=res.data;
						if (res.success) {
							this.$message({
								message: res.message,
								type: 'success'
							});
							this.query();
						} else {
							this.$message.error(res.message);
						}
					})
				},
				restore(row){
					let params = new URLSearchParams();
					params.append("replyId", row.replyId);
					axios({
						method: 'post',
						url: '/api/bbs/reply/restoreReply',
						data:params,
						headers: {},
					}).then(res => {
						res=res.data;
						if (res.success) {
							this.$message({
								message: res.message,
								type: 'success'
							});
							this.query();
						} else {
							this.$message.error(res.message);
						}
					})
				},
				/* deletereply(){
					let params = new URLSearchParams();
					params.append("replyId", val.replyId);
					axios({
						method: 'post',
						url: '/api/bbs/reply/upReplyIsDel',
						data:params,
						headers: {},
					}).then(res => {
						if (res.success) {
							this.reload();
							alert(res.message)
						} else {
							alert(res.message)
						}
					})
				}, */
				stickPost(row){
					let params = new URLSearchParams();
					params.append("postId",row.postId);
					axios({
						method: 'post',
						url: '/api/bbs/post/stickPost',
						data: params,
						headers: {},
					}).then(res => {
						res = res.data;
						if(res.success){
							this.$message({
								message: res.message,
								type: 'success'
							});
							this.query();
						}else{
							this.$message.error(res.message);
						}
					})
				},
				cancelStick(row){
					let params = new URLSearchParams();
					params.append("postId",row.postId);
					axios({
						method: 'post',
						url: '/api/bbs/post/cancelStick',
						data: params,
						headers: {},
					}).then(res => {
						res = res.data;
						if(res.success){
							this.$message({
								message: res.message,
								type: 'success'
							});
							this.query();
						}else{
							this.$message.error(res.message);
						}
					})
				},
				handleClose(done) {
					this.$confirm('确认关闭？').then(_ => {
						done();
					}).catch(_ => {
						
					});
				},
				handleSizeChange(val) {
					this.pagesize = val;
					console.log(this.pagesize)
				},
				handleCurrentChange() {
					this.currentPage = currentPage;
					console.log(this.currentPage)
				},
				created: function () {
					this.total = this.tableData.length;
				},
				current_change: function (currentPage) {
					this.currentPage = currentPage;
					this.query();
				},
				handleOpen(key, keyPath) {
					console.log(key, keyPath);
				},
				handleClose(key, keyPath) {
					console.log(key, keyPath);
				}
			},
		});
	</script>


	<style type="text/css">
		.el-aside {
			background-color: #D3DCE6;
			color: #333;
			text-align: center;
			line-height: 200px;
		}

		.el-main {
			background-color: #E9EEF3;
			color: #333;
			text-align: center;
			line-height: 160px;
		}
	</style>
	</body>
</html>
